<template>
  <div class="app-container">
    <!-- 搜索条件框 -->
    <el-card shadow="never">
      <div class="title">搜索条件</div>
      <div class="search-wrap">
        <el-form label-width="100px">
          <el-form-item label="创建时间：">
            <div class="item">
              <el-radio-group v-model="chooseTime" @change="changeTime">
                <el-radio :label="1" border>全部</el-radio>
                <el-radio :label="2" border>今天</el-radio>
                <el-radio :label="3" border>昨天</el-radio>
                <el-radio :label="4" border>自定义</el-radio>
              </el-radio-group>
              <el-date-picker
                v-show="chooseTime === 4"
                v-model="datePicker"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="changePickTime"
              />
            </div>
          </el-form-item>
          <el-form-item label="订单号：">
            <div class="item">
              <el-input v-model="get_demand_order_info_list.keywordOrderNumber" placeholder="请输入关键词" @keyup.enter.native="getDemandOrderInfoList" />
            </div>
          </el-form-item>
          <el-form-item label="订单类型：">
            <div class="item">
              <el-checkbox-group
                v-model="get_demand_order_info_list.type"
                :min="1"
                style="margin: 0.2rem 0.8rem 0.2rem 0;"
                @change="getDemandOrderInfoList"
              >
                <el-checkbox label="代拿打印文件" border />
                <el-checkbox label="失物招领" border />
                <el-checkbox label="代拿快递" border />
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="订单状态：">
            <div class="item">
              <el-checkbox-group
                v-model="get_demand_order_info_list.status"
                :min="1"
                @change="getDemandOrderInfoList"
              >
                <el-checkbox
                  v-for="(item, index) in status"
                  :key="index"
                  :label="item.value"
                  style="margin: 0.2rem 0.8rem 0.2rem 0;"
                  border
                >
                  {{ item.label }}({{ item.num }})
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="归属区域：">
            <div class="item">
              <el-checkbox-group
                v-model="get_demand_order_info_list.area_id"
                :min="1"
                @change="getDemandOrderInfoList"
              >
                <el-checkbox
                  v-for="(item, index) in data_demand_order_info_list.area"
                  :key="index"
                  :label="item.area_id"
                  style="margin: 0.2rem 0.8rem 0.2rem 0;"
                  border
                >
                  [{{ item.area_number }}]{{ item.name }}({{ item.num }})
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="statistic-wrap">
        <div class="item">
          <el-card v-for="(item, index) in statistic" :key="index" :index="index" :body-style="{background: item.color}">
            <span class="icon">
              <i :class="item.icon" />
            </span>
            <div class="content">
              <span class="count">{{ item.actualValue }}</span>
              <span class="label">{{ item.name }}</span>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
    <!-- 搜索条件框 -->

    <el-card shadow="never">
      <!-- 小标题 -->
      <div class="title">云需求订单列表</div>
      <el-table
        v-loading="dataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        :data="data_demand_order_info_list.data"
        class="table"
        highlight-current-row
        :height="tableHeight"
        :max-height="tableHeight"
        stripe
        @sort-change="changeSort"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="order_number" label="订单号" />
        <el-table-column label="用户头像">
          <template slot-scope="{ row }">
            <el-image :src="row.avatar_url" style="width:60px;height:60px" :preview-src-list="[row.avatar_url]" />
          </template>
        </el-table-column>
        <el-table-column prop="nick_name" label="微信昵称" />
        <el-table-column label="跑腿员昵称">
          <template slot-scope="{ row }">
            <span v-if="row.take_order_nick_name === null">暂无</span>
            <span v-else>{{ row.take_order_nick_name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="订单状态">
          <template slot-scope="{ row }">
            <el-tag :type="status_color(row.status)" effect="dark">{{ status_text(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="demand_type_name" label="订单类型" />
        <el-table-column label="所属区域">
          <template slot-scope="{ row }">
            <span>{{ '[' + row.area_number + ']' + row.area_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联打印订单">
          <template slot-scope="{ row }">
            <span v-if="row.print_order_number === null">暂无</span>
            <span v-else>{{ row.print_order_number }}</span>
          </template>
        </el-table-column>
        <el-table-column v-permission="['cloud-demand-price']" prop="price" label="订单原金额" sortable="custom" column-key="price" />
        <el-table-column v-permission="['cloud-demand-price']" prop="actual_price" label="实际支付" sortable="custom" column-key="actual_price" />
        <el-table-column v-permission="['cloud-demand-price']" prop="tip" label="小费" sortable="custom" column-key="tip" />
        <el-table-column prop="create_time" label="下单时间" sortable="custom" column-key="create_time" />
        <el-table-column fixed="right" label="操作" width="295px">
          <template slot-scope="{ row }">
            <el-button v-if="row.status === 9" v-permission="['cloud-demand-audit-order']" type="success" @click="changeDemandOrderStatus(1, row)">过审</el-button>
            <el-button v-if="row.status === 9" v-permission="['cloud-demand-audit-order']" type="danger" @click="changeDemandOrderStatus(10, row)">拒绝</el-button>
            <el-button v-if="row.status === 5" type="warning" @click="notEntertainedDemandOrder(row)">不受理</el-button>
            <el-button type="primary" @click="goToDemandDetails(row)">详情</el-button>
            <el-dropdown>
              <el-button type="primary">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="remarkEvent(row)">备注</el-dropdown-item>
                <el-dropdown-item @click.native="refundEvent(row)">立即退款</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes,prev, pager, next, jumper"
        :total="data_demand_order_info_list.total"
        :page-size="get_demand_order_info_list.pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="get_demand_order_info_list.currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
import { pickerOptionsMixin } from '../../mixins/pickerOptions'
import { getDemandOrderInfoList, changeDemandOrderRemark, demandOrderRefund, changeDemandOrderStatus, notEntertainedDemandOrder } from '@/api/order-manage'
import { getDatatime } from '@/common/js/until'

export default {
  mixins: [pickerOptionsMixin],
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 250,

      // loading开关
      dataRequestLoading: false,

      chooseTime: 1,
      datePicker: [],

      // 数据统计
      statistic: [
        { name: '待审批总量', icon: 'el-icon-s-management', actualValue: '--', color: '#ffc24780' },
        { name: '通过审批量', icon: 'el-icon-s-data', actualValue: '--', color: '#409eff80' },
        { name: '拒绝审批量', icon: 'el-icon-s-opportunity', actualValue: '--', color: '#3abf9480' }
      ],

      // 显示订单状态
      status: [
        { color: 'danger', label: '未支付', value: 0, num: 0 },
        { color: 'primary', label: '等待骑手接单', value: 1, num: 0 },
        { color: 'info', label: '订单已取消', value: 2, num: 0 },
        { color: 'primary', label: '配送中', value: 3, num: 0 },
        { color: 'primary', label: '已送达', value: 4, num: 0 },
        { color: 'warning', label: '申诉中', value: 5, num: 0 },
        { color: 'danger', label: '退款中', value: 6, num: 0 },
        { color: 'info', label: '已退款', value: 7, num: 0 },
        { color: 'success', label: '用户确认收货', value: 8, num: 0 },
        { color: 'warning', label: '待审核订单', value: 9, num: 0 },
        { color: 'info', label: '审核不通过订单', value: 10, num: 0 },
        { color: 'warning', label: '特殊订单', value: 11, num: 0 }
      ],

      // 第一次请求
      once: false,

      // 获取需求订单信息列表请求参数
      get_demand_order_info_list: {
        pageSize: 20,
        currentPage: 1,
        keywordOrderNumber: '',
        sort_name: '',
        sort: 'desc',
        start_time: '',
        end_time: '',
        type: ['代拿打印文件', '失物招领', '代拿快递'],
        status: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
        area_id: [1]
      },

      // 接口返回值
      data_demand_order_info_list: {
        data: [],
        area: [],
        statusNum: '',
        statisticsNum: {
          to_audit_num: '',
          pass_audit_num: '',
          no_pass_audit_num: ''
        },
        total: 0
      }
    }
  },
  mounted() {
    this.getDemandOrderInfoList() // 获取需求订单信息列表
  },
  methods: {
    // 获取需求订单信息列表
    getDemandOrderInfoList() {
      this.dataRequestLoading = true
      getDemandOrderInfoList(this.get_demand_order_info_list).then(res => {
        this.dataRequestLoading = false
        this.data_demand_order_info_list = {
          data: res.result.showing,
          area: res.result.area,
          statusNum: res.result.statusNum,
          statisticsNum: res.result.statisticsNum,
          total: res.result.total
        }
        this.status[0].num = this.data_demand_order_info_list.statusNum.status0_num
        this.status[1].num = this.data_demand_order_info_list.statusNum.status1_num
        this.status[2].num = this.data_demand_order_info_list.statusNum.status2_num
        this.status[3].num = this.data_demand_order_info_list.statusNum.status3_num
        this.status[4].num = this.data_demand_order_info_list.statusNum.status4_num
        this.status[5].num = this.data_demand_order_info_list.statusNum.status5_num
        this.status[6].num = this.data_demand_order_info_list.statusNum.status6_num
        this.status[7].num = this.data_demand_order_info_list.statusNum.status7_num
        this.status[8].num = this.data_demand_order_info_list.statusNum.status8_num
        this.status[9].num = this.data_demand_order_info_list.statusNum.status9_num
        this.status[10].num = this.data_demand_order_info_list.statusNum.status10_num
        this.status[11].num = this.data_demand_order_info_list.statusNum.status11_num

        this.statistic = [
          { name: '待审批总量', icon: 'el-icon-s-management', actualValue: this.data_demand_order_info_list.statisticsNum.to_audit_num, color: '#ffc24780' },
          { name: '通过审批量', icon: 'el-icon-s-data', actualValue: this.data_demand_order_info_list.statisticsNum.pass_audit_num, color: '#409eff80' },
          { name: '拒绝审批量', icon: 'el-icon-s-opportunity', actualValue: this.data_demand_order_info_list.statisticsNum.no_pass_audit_num, color: '#3abf9480' }
        ]
        if (this.once === false) {
          this.get_demand_order_info_list.area_id = []
          this.data_demand_order_info_list.area.forEach(val => {
            this.get_demand_order_info_list.area_id.push(val.area_id)
          })
          this.once = true
          this.getDemandOrderInfoList()
        }
      })
    },

    // 显示订单状态
    status_text(data) {
      const status = this.status.filter(v => {
        if (v.value === data) {
          return v.label
        }
      })
      return status[0].label
    },

    // 显示订单状态颜色
    status_color(data) {
      const status = this.status.filter(v => {
        if (v.value === data) {
          return v.color
        }
      })
      return status[0].color
    },

    // 跳转云打印订单详情页
    goToDemandDetails(row) {
      this.$router.push({
        path: '/order-manage/demand-details',
        query: {
          id: row.demand_order_id
        }
      })
    },

    // 切换时间范围
    changeTime() {
      const getYear = new Date().getFullYear()
      const getMonth = new Date().getMonth() < 10 ? '0' + (new Date().getMonth()) : new Date().getMonth()
      const getDay = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      if (this.chooseTime === 1) {
        this.get_demand_order_info_list.start_time = ''
        this.get_demand_order_info_list.end_time = ''
        this.getDemandOrderInfoList()
      } else if (this.chooseTime === 2) {
        this.get_demand_order_info_list.start_time = getDatatime(new Date(getYear, getMonth, getDay, 0, 0))
        this.get_demand_order_info_list.end_time = getDatatime(new Date(getYear, getMonth, getDay, 23, 59))
        this.getDemandOrderInfoList()
      } else if (this.chooseTime === 3) {
        this.get_demand_order_info_list.start_time = getDatatime(new Date(getYear, getMonth, getDay - 1, 0, 0))
        this.get_demand_order_info_list.end_time = getDatatime(new Date(getYear, getMonth, getDay - 1, 23, 59))
        this.getDemandOrderInfoList()
      }
    },

    // 切换时间选择器范围
    changePickTime() {
      this.get_demand_order_info_list.start_time = getDatatime(this.datePicker[0])
      this.get_demand_order_info_list.end_time = getDatatime(this.datePicker[1])
      this.getDemandOrderInfoList()
    },

    // 更改需求订单审核状态
    changeDemandOrderStatus(data, row) {
      changeDemandOrderStatus({ demand_order_id: row.demand_order_id, status: data }).then(res => {
        this.getDemandOrderInfoList()
      })
    },

    // 备注
    remarkEvent(row) {
      this.$prompt('请输入备注内容', '请输入备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPlaceholder: '请输入备注',
        inputValue: row.remark
      }).then(({ value }) => {
        changeDemandOrderRemark({ demand_order_id: row.demand_order_id, remark: value }).then(res => {
          this.getDemandOrderInfoList()
          this.$message({
            type: 'success',
            message: '备注成功'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },

    // 退款
    refundEvent(row) {
      this.$confirm('此操作将退款该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        demandOrderRefund({ demand_order_id: row.demand_order_id }).then(res => {
          this.getDemandOrderInfoList()
          this.$message({
            type: 'success',
            message: '退款成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退款'
        })
      })
    },

    // 不受理申诉需求订单
    notEntertainedDemandOrder(row) {
      notEntertainedDemandOrder({ demand_order_id: row.demand_order_id }).then(res => {
        this.getDemandOrderInfoList()
      })
    },

    // 切换每页条数方法
    changePageSize(data) {
      this.get_demand_order_info_list.pageSize = data
      this.getDemandOrderInfoList()
    },

    // 切换页码方法
    changeCurrentPage(data) {
      this.get_demand_order_info_list.currentPage = data
      this.getDemandOrderInfoList()
    },

    // 排序
    changeSort({ column, order }) {
      if (column.columnKey === 'actual_price') {
        switch (order) {
          case 'descending':
            this.get_demand_order_info_list.sort_name = 'actual_price'
            this.get_demand_order_info_list.sort = 'desc'
            this.getDemandOrderInfoList()
            break
          case 'ascending':
            this.get_demand_order_info_list.sort_name = 'actual_price'
            this.get_demand_order_info_list.sort = 'asc'
            this.getDemandOrderInfoList()
            break
          default:
            this.get_demand_order_info_list.sort_name = ''
            this.get_demand_order_info_list.sort = 'desc'
            this.getDemandOrderInfoList()
        }
      } else if (column.columnKey === 'create_time') {
        switch (order) {
          case 'descending':
            this.get_demand_order_info_list.sort_name = 'create_time'
            this.get_demand_order_info_list.sort = 'desc'
            this.getDemandOrderInfoList()
            break
          case 'ascending':
            this.get_demand_order_info_list.sort_name = 'create_time'
            this.get_demand_order_info_list.sort = 'asc'
            this.getDemandOrderInfoList()
            break
          default:
            this.get_demand_order_info_list.sort_name = ''
            this.get_demand_order_info_list.sort = 'desc'
            this.getDemandOrderInfoList()
        }
      } else if (column.columnKey === 'price') {
        switch (order) {
          case 'descending':
            this.get_demand_order_info_list.sort_name = 'price'
            this.get_demand_order_info_list.sort = 'desc'
            this.getDemandOrderInfoList()
            break
          case 'ascending':
            this.get_demand_order_info_list.sort_name = 'price'
            this.get_demand_order_info_list.sort = 'asc'
            this.getDemandOrderInfoList()
            break
          default:
            this.get_demand_order_info_list.sort_name = ''
            this.get_demand_order_info_list.sort = 'desc'
            this.getDemandOrderInfoList()
        }
      } else if (column.columnKey === 'tip') {
        switch (order) {
          case 'descending':
            this.get_demand_order_info_list.sort_name = 'tip'
            this.get_demand_order_info_list.sort = 'desc'
            this.getDemandOrderInfoList()
            break
          case 'ascending':
            this.get_demand_order_info_list.sort_name = 'tip'
            this.get_demand_order_info_list.sort = 'asc'
            this.getDemandOrderInfoList()
            break
          default:
            this.get_demand_order_info_list.sort_name = ''
            this.get_demand_order_info_list.sort = 'desc'
            this.getDemandOrderInfoList()
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .statistic-wrap {
    width: 50%;
    color: #606266;
    display: inline-block;
    padding: 10px;
    float: left;

    .item {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;

      .el-card {
        width: 200px;
        margin-right: 10px;
        box-shadow: 0 0 10px #f5f9fc;

        .icon {
          width: 40%;
          color: #ffffff;
          font-size: 45px;
        }

        .content {
          width: 60%;
          display: inline-block;
          color: white;
          .label {
            display: block;
            font-size: 12px;
            font-weight: 600;
          }
          .count {
            font-size: 24px;
            font-weight: 600;
          }

          .el-progress {
            width: 60%;
            float: left;

            .action {
              width: 20%;
              margin-left: 10px;
              float: left;

              .el-progress-bar {
                width: 90%
              }

            }

          }

        }

      }
    }

    .text-gray {
      color: #a1a1a1
    }

  }
</style>
